'use client'

import { useCart } from '../components/CartContext'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import toast from 'react-hot-toast'

export default function CartPage() {
  const { items, removeItem, updateQuantity, total, clearCart } = useCart()
  const router = useRouter()

  const handleCheckout = () => {
    if (items.length === 0) {
      toast.error('购物车是空的！')
      return
    }
    // TODO: 实现结账逻辑
    toast.success('订单已提交！')
    clearCart()
    router.push('/orders')
  }

  return (
    <div className="min-h-screen bg-background py-8">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-2xl font-bold text-gray-900 mb-8">购物车</h1>

        {items.length === 0 ? (
          <div className="text-center py-12">
            <p className="text-gray-500 mb-4">购物车是空的</p>
            <Link
              href="/menu"
              className="inline-block bg-primary text-white px-6 py-2 rounded-lg hover:bg-opacity-90"
            >
              去点餐
            </Link>
          </div>
        ) : (
          <>
            <div className="bg-white rounded-lg shadow-md overflow-hidden">
              {items.map(item => (
                <div
                  key={item.id}
                  className="flex items-center justify-between p-4 border-b last:border-b-0"
                >
                  <div className="flex-1">
                    <h3 className="text-lg font-semibold text-gray-900">{item.name}</h3>
                    <p className="text-primary font-bold">¥{item.price}</p>
                  </div>
                  <div className="flex items-center space-x-4">
                    <div className="flex items-center space-x-2">
                      <button
                        className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300"
                        onClick={() => updateQuantity(item.id, item.quantity - 1)}
                      >
                        -
                      </button>
                      <span className="w-8 text-center">{item.quantity}</span>
                      <button
                        className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300"
                        onClick={() => updateQuantity(item.id, item.quantity + 1)}
                      >
                        +
                      </button>
                    </div>
                    <button
                      className="text-red-500 hover:text-red-700"
                      onClick={() => removeItem(item.id)}
                    >
                      删除
                    </button>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-8 bg-white rounded-lg shadow-md p-6">
              <div className="flex justify-between items-center mb-4">
                <span className="text-lg font-semibold">总计</span>
                <span className="text-2xl font-bold text-primary">¥{total}</span>
              </div>
              <div className="flex space-x-4">
                <button
                  className="flex-1 bg-primary text-white py-3 rounded-lg hover:bg-opacity-90"
                  onClick={handleCheckout}
                >
                  提交订单
                </button>
                <button
                  className="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg hover:bg-gray-300"
                  onClick={clearCart}
                >
                  清空购物车
                </button>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  )
} 